<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Flexbox 测试</title>
    <style>
      .container {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: center;
        gap: 0;
        height: 300px;
        border: 2px solid #000;
        margin: 20px;
      }

      .item {
        width: 100px;
        height: 100px;
        margin: 10px;
        background-color: #3498db;
        display: flex;
        justify-content: center;
        align-items: center;
        color: white;
        font-weight: bold;
      }

      .controls {
        margin-bottom: 20px;
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
      }

      .control-group {
        border: 1px solid #ccc;
        padding: 10px;
        border-radius: 5px;
        width: 150px;
      }

      .control-group h3 {
        margin-top: 0;
        font-size: 16px;
      }

      .controls button {
        margin: 5px 0;
        width: 100%;
        box-sizing: border-box;
        background-color: #f0f0f0;
        border: none;
        padding: 10px;
        cursor: pointer;
        transition: background-color 0.3s;
      }

      .controls button.selected {
        background-color: red;
        color: white;
      }
    </style>
  </head>
  <body>
    <div class="controls">
      <div class="control-group">
        <h3>Flex Direction</h3>
        <button onclick="setFlexDirection('row')" data-value="row">Row</button>
        <button onclick="setFlexDirection('column')" data-value="column">
          Column
        </button>
      </div>
      <div class="control-group">
        <h3>Flex Wrap</h3>
        <button onclick="setFlexWrap('nowrap')" data-value="nowrap">
          No Wrap
        </button>
        <button onclick="setFlexWrap('wrap')" data-value="wrap">Wrap</button>
      </div>
      <div class="control-group">
        <h3>Justify Content</h3>
        <button
          onclick="setJustifyContent('flex-start')"
          data-value="flex-start"
        >
          Flex Start
        </button>
        <button onclick="setJustifyContent('center')" data-value="center">
          Center
        </button>
        <button onclick="setJustifyContent('flex-end')" data-value="flex-end">
          Flex End
        </button>
        <button
          onclick="setJustifyContent('space-between')"
          data-value="space-between"
        >
          Space Between
        </button>
        <button
          onclick="setJustifyContent('space-around')"
          data-value="space-around"
        >
          Space Around
        </button>
        <button
          onclick="setJustifyContent('space-evenly')"
          data-value="space-evenly"
        >
          Space Evenly
        </button>
      </div>
      <div class="control-group">
        <h3>Align Items</h3>
        <button onclick="setAlignItems('flex-start')" data-value="flex-start">
          Align Flex Start
        </button>
        <button onclick="setAlignItems('center')" data-value="center">
          Align Center
        </button>
        <button onclick="setAlignItems('flex-end')" data-value="flex-end">
          Align Flex End
        </button>
        <button onclick="setAlignItems('baseline')" data-value="baseline">
          Align Baseline
        </button>
        <button onclick="setAlignItems('stretch')" data-value="stretch">
          Align Stretch
        </button>
      </div>
      <div class="control-group">
        <h3>Gap</h3>
        <button onclick="setGap('0')" data-value="0">0</button>
        <button onclick="setGap('10px')" data-value="10px">10px</button>
        <button onclick="setGap('20px')" data-value="20px">20px</button>
        <button onclick="setGap('30px')" data-value="30px">30px</button>
        <button onclick="setGap('40px')" data-value="40px">40px</button>
      </div>
    </div>
    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
    </div>

    <script>
      let flexDirection = "row";
      let flexWrap = "nowrap";
      let justifyContent = "flex-start";
      let alignItems = "center";
      let gap = "0";

      function setFlexDirection(value) {
        flexDirection = value;
        document.querySelector(".container").style.flexDirection = value;
        selectButton("Flex Direction", value);
      }

      function setFlexWrap(value) {
        flexWrap = value;
        document.querySelector(".container").style.flexWrap = value;
        selectButton("Flex Wrap", value);
      }

      function setJustifyContent(value) {
        justifyContent = value;
        document.querySelector(".container").style.justifyContent = value;
        selectButton("Justify Content", value);
      }

      function setAlignItems(value) {
        alignItems = value;
        document.querySelector(".container").style.alignItems = value;
        selectButton("Align Items", value);
      }

      function setGap(value) {
        gap = value;
        document.querySelector(".container").style.gap = value;
        selectButton("Gap", value);
      }

      function selectButton(groupTitle, value) {
        const groups = document.querySelectorAll(".control-group");
        groups.forEach((group) => {
          const title = group.querySelector("h3").textContent.trim();
          if (title === groupTitle) {
            const buttons = group.querySelectorAll("button");
            buttons.forEach((button) => {
              const buttonValue = button.getAttribute("data-value");
              if (buttonValue === value.toLowerCase()) {
                button.classList.add("selected");
              } else {
                button.classList.remove("selected");
              }
            });
          }
        });
      }

      // 初始化按钮选中状态
      window.onload = function () {
        selectButton("Flex Direction", flexDirection);
        selectButton("Flex Wrap", flexWrap);
        selectButton("Justify Content", justifyContent);
        selectButton("Align Items", alignItems);
        selectButton("Gap", gap);
      };
    </script>
  </body>
</html>
